import { getModelData, getViewKey } from '@/utils/utils';
import { Icon as AntIcon, Tooltip } from 'antd';
import classnames from 'classnames';
import { Icon } from 'gantd';
import React, { useRef } from 'react';
import type { RouteComponentProps } from 'react-router-dom';
import { withRouter } from 'umi';
import _ from 'lodash';
import styles from './index.less';

interface TitleProps extends RouteComponentProps {
  title?: string; // 标题文本
  showSplitLine?: boolean; // 是否显示右边分割线
  showShortLine?: boolean; // 是否显示左边断线
  isPageTitle?: boolean; // 是否是页面级标题
  showHelpIcon?: boolean; //是否显示帮助文档Icon
  helpDocCategory?: any; //wordpress帮助文档的跳转目录，详情页需要
}

interface MergedItem {
  name: string;
  icon: string | React.ReactNode;
  path: string;
}

export default withRouter(function Title(props: TitleProps) {
  const {
    title,
    showSplitLine = false,
    showShortLine = false,
    location: { pathname, search },
  } = props;
  const menu = getModelData('menu');
  const { menuData = [] } = Object(menu);

  let name: string = '';
  let icon: string = '';
  const menuItem = _.find(menuData, (o: any) => getViewKey(o.path) === getViewKey(pathname));
  if (menuItem) {
    name = menuItem.name;
    icon = menuItem.icon;
  }
  const exactItem = _.find(menuData, (o: any) => o.path === pathname + search);
  if (exactItem) {
    name = exactItem.name;
    icon = exactItem.icon;
  }

  const text = title || name;

  return (
    <div
      className={classnames(styles.title, {
        [styles[`title-split-line`]]: showSplitLine,
        [styles[`title-short-line`]]: showShortLine,
      })}
    >
      {!title && (
        <span className="gant-margin-h-5" style={{ verticalAlign: 'bottom' }}>
          <Icon type={icon ? icon : 'unordered-list'} />
        </span>
      )}
      <span className={styles.text}>{text}</span>
    </div>
  );
});
